<template>
	<div class="layout-padding">
		<el-card shadow="hover" style="overflow-y: auto">
			<div class="mb15">
				<el-form label-width="90px" size="default">
					<el-row :gutter="20">
						<el-col :span="8">
							<el-form-item label="创建时间：">
								<el-date-picker v-model="rangeTime" type="daterange" range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期">
								</el-date-picker>
							</el-form-item>
						</el-col>
						<el-col :span="8">
							<el-form-item label="角色名称：">
								<el-input v-model="formData.Name" style="max-width: 180px" clearable> </el-input>
							</el-form-item>
						</el-col>
					</el-row>
				</el-form>
			</div>
			<div class="mb15">
				<el-button size="default" type="primary" plain @click="loadData()"
					><el-icon>
						<ele-Search />
					</el-icon>
					查询
				</el-button>
				<PermissionButton label="新增" name="Add" size="default" plain type="success" @click="onEdit(0)"></PermissionButton>
				<PermissionButton
					label="批量删除"
					name="Delete"
					size="default"
					plain
					type="danger"
					@click="onRemove(tableData.selection.map((s: any) => s.Id))"
				></PermissionButton>
			</div>
			<el-table :data="tableData.data" @selection-change="(selection:any[])=>tableData.selection=selection">
				<el-table-column type="selection" width="55" align="center" />
				<el-table-column type="index" label="序号" width="60" />
				<el-table-column prop="Name" label="角色名称"> </el-table-column>
				<el-table-column prop="DataRang" label="数据范围"> </el-table-column>
				<el-table-column prop="Status" label="角色状态">
					<template #default="scope">
						<el-tag type="success" v-if="scope.row.Status">启用</el-tag>
						<el-tag type="info" v-else>禁用</el-tag>
					</template>
				</el-table-column>
				<el-table-column prop="CreateTime" label="创建时间"></el-table-column>
				<el-table-column label="操作" width="160" align="center">
					<template #default="scope">
						<PermissionButton size="small" text type="warning" @click="onPermission(scope.row.Id)" label="设置权限" name="Put"></PermissionButton>
						<PermissionButton size="small" text type="primary" @click="onEdit(scope.row.Id)" label="修改" name="Put"></PermissionButton>
						<PermissionButton size="small" text type="danger" @click="onRemove([scope.row.Id])" label="删除" name="Delete"></PermissionButton>
					</template>
				</el-table-column>
			</el-table>
			<el-pagination
				background
				small
				class="page"
				layout="prev, pager, next"
				:current-page="formData.PageIndex"
				:page-size="formData.PageSize"
				:total="tableData.total"
				@current-change="onPage"
			>
			</el-pagination>
		</el-card>
		<EditDialog ref="refEdit" @refresh="loadData()" />
		<PermissionDialog ref="permissionEdit" />
	</div>
</template>

<script setup lang="ts">
import { Ref, ref, onMounted } from 'vue';
import EMsg from '/@/common/eMsg';
import EditDialog from './edit.vue';
import PermissionButton from '/@/components/permissionButton/index.vue';
import { Delete, Get } from '/@/common/http';
import PermissionDialog from './permission.vue';
const permissionEdit = ref();

const refEdit = ref();
const rangeTime = ref([]);
const formData = ref({
	PageIndex: 1,
	PageSize: 50,
	Name: '',
	StartQueryTime: '',
	EndQueryTime: '',
});
const tableData: Ref = ref({
	data: [],
	selection: [],
	total: 0,
});

const loadData = () => {
	if (rangeTime.value!.length == 2) {
		formData.value.StartQueryTime = rangeTime.value[0];
		formData.value.EndQueryTime = rangeTime.value[1];
	}
	Get('SysRole/GetRolePage', formData.value).then( (res: any) => {
		tableData.value.data = res.Data.Items;
		tableData.value.total = res.Data.TotalCount;
	});
};

const onPage = (PageIndex: number) => {
	formData.value.PageIndex = PageIndex;
	loadData();
};

const onEdit = (id: number) => {
	refEdit.value.onShow(id);
};

const onRemove = (ids: number[]) => {
	if (ids.length == 0) {
		EMsg.error('未选择任何数据');
		return;
	}
	EMsg.confirm(`确定删除该数据？`, () => {
		let data: any[] = [];
		ids.forEach((id) => data.push({ Id: id }));
		Delete('SysRole/DeleteSysRole', data, (res: any) => {
			EMsg.success(res.Message);
			loadData();
		});
	});
};

const onPermission = (id: number) => {
	permissionEdit.value.onShow(id);
};

onMounted(() => {
	loadData();
});
</script>
